<template>
  <view class="cart-container">
    <!-- 背景图片开始   -->
    <img class="bg-pic" src="/static/images/bookshelf_bg.jpg" alt="" />
    <!-- 背景图片结束 -->
    <!-- 管理开始 -->
    <view class="header">
      <view class="left-text"> 全部10 </view>
      <view class="right-text">
        <text class="manager"> 管理 </text>
      </view>
    </view>
    <!-- 管理结束 -->
    <!-- 书籍商品开始 -->
    <scroll-view scroll-y="true" class="scroll">
      <view class="books-container">
        <view class="book-left-list">
          <view class="books-item">
            <view class="book-pic">
              <image class="pic" src="../../static/category/体育保健.jpg" mode="widthFix" lazy-load="true" />
            </view>
            <view class="book-desc">
              <view class="book-title"> 百草园到三味书屋中的故事 </view>
              <view class="book-price">
                <view class="price-content"> ￥<text class="price">16.66</text>元 </view>
                <view class="drop"> ... </view>
              </view>
            </view>
          </view>
        </view>
        <view class="book-right-list">
          <view class="books-item">
            <view class="book-pic">
              <image class="pic" src="../../static/category/体育保健.jpg" mode="widthFix" lazy-load="true" />
            </view>
            <view class="book-desc">
              <view class="book-title"> 百草园到三味书屋中的故事 </view>
              <view class="book-price">
                <view class="price-content"> ￥<text class="price">16.66</text>元 </view>
                <view class="drop"> ... </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 数据商品结束 -->

    <!-- 订单提交/书籍删除开始 -->
    <view class="cart-manager">
      <view class="all-checked"> </view>
      <view class="order-price">
        <view class="total-price"> 合计：<text>342.88</text> </view>
        <view class="submit"> 结算（{{ 5 }}） </view>
      </view>
    </view>

    <!-- 订单提交/书籍删除结束 -->
  </view>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {}
  },
  onLoad() {},
  methods: {}
})
</script>

<style lang="scss" scoped>
.cart-container {
  font-family: 'aliregular';
  position: relative;
  height: 100vh;
  overflow: hidden;

  .bg-pic {
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.5;
    z-index: -1;
  }

  .header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    display: flex;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 0 20rpx;
  }

  .scroll {
    height: calc(100vh - 200rpx);
  }

  .books-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;

    .book-left-list,
    .book-right-list {
      width: calc(50% - 20rpx);
    }
  }

  .cart-manager {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0 20rpx;

    .order-price {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
